<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品管理</title>
    <link rel="stylesheet" href="../../style/brand/index.css">
    <link rel="stylesheet" href="../../libs/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css">
    <script src="../../libs/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.js"></script>
    <script src="../../js/vue-2.6.12.js"></script>
    <script src="../../js/axios-0.21.0.js"></script>
    <script src="../../js/qs-6.9.4.js"></script>
    <script src="../../js/vue-router-3.4.9.js"></script>
</head>

<body>
    <div id="app">
    <div class="containers">
        <div class="containers-header">
            <form class="form-inline">
                <div class="row g-3 align-items-center">
                    <div class="col-auto">
                        <label for="inputPassword6" >商品名称</label>
                        <input type="text" id="inputPassword6" class="form-control"
                               placeholder="请输入商品名称" v-model="goodsName">
                    </div>
                    <div class="col-auto">
                        <label for="exampleInputName2">价格区间</label>
                        <select class="form-control">
                            <option>0-100</option>
                            <option>100-1000</option>
                            <option>1000-5000</option>
                            <option>5000-10000</option>
                        </select>
                    </div>
                    <div class="col-auto"><br>
                        <button class="btn btn-dark" @click="searchGoods">搜索</button>

                        <a href="../../views/brand/addbrand.html" target="tv" type="button"
                            class="btn btn-primary">上架商品</a>
                    </div>
                </div>

            </form>
            <br>

        </div>
        <!-- 内容展示区域 -->
        <div class="containers-connet">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>商品名称</th>
                        <th>单价</th>
                        <th>库存</th>
                        <th>状态</th>
                        <th>上架时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- <tr>
                        <td>1</td>
                        <td>衣服</td>
                        <td>199.5￥</tg.stocd>
                        <td>12</td>
                        <td>
                            <button type="button" class="btn btn-info">启用</button>
                        </td>
                        <td>2023-5-12</td>
                        <td>
                            <button type="button" class="btn btn-danger" id="take">上架</button>
                            <a href="../../views/brand/detailsBrand.html" target="tv" type="button"
                                class="btn btn-success">详情</a>
                            <button type="button" class="btn btn-primary " data-bs-toggle="modal"
                                data-bs-target="#exampleModal">编辑</button>
                        </td>
                    </tr> -->
                    <tr v-for="(g,i) in goods">
                        <td>{{g.goodsId}}</td>
                        <td>{{g.goodsName}}</td>
                        <td>{{g.retailPrice}}</td>
                        <td>{{g.stock}}</td>
                        <td >
                           <!-- <div class="form-check form-switch d-flex justify-content-around">-->
            
                                   <!-- <input class="form-check-input mt-3" type="checkbox" role="switch" :id="'status'+g.goodsId" :value="g.goodsId" v-model="checked" @click="updateStatus(g.goodsId)">-->
                               <!-- <label class="form-check-label " :for="'status'+g.goodsId"><span :class="g.status==1 ? 'badge bg-primary':'badge bg-secondary'">{{ g.status == 1 ? '上架':'下架'}}</span></label>-->

                                       {{g.status==1?"上架":"下架"}}

                             <!-- </div>-->
                        </td>
                        <td>{{g.listTime}}</td>
                        <td>
                            <button type="button" class="btn btn-danger" @click="updateStatus(0,g.goodsId,i)" v-show="g.status==1">下架</button>
                            <button type="button" class="btn btn-primary" @click="updateStatus(1,g.goodsId,i)" v-show="g.status==0">上架</button>
                           <!-- <a href="../../views/brand/detailsBrand.html?goodsId=" target="tv" type="button" class="btn btn-success">详情</a>-->
                            <button class="btn btn-success" @click="toDetail(g.goodsId)">详情</button>
                            <button type="button" class="btn btn-danger" @click="deleteGoods(g.goodsId,i)">删除</button>
                            <button type="button" class="btn btn-primary "  @click="openEditGoodsModal(g)">编辑</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    
    <!-- 编辑模态框 -->
    <div class="modal fade" id="editGoodsModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">编辑商品信息</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="name">商品名:</label>
                            <input type="text" class="form-control" id="name" placeholder="衣服"  v-model="good.goodsName">
                        </div>
                        <div class="form-group">
                            <label for="category">类别</label>
                            <select class="form-control" id="category" v-model="good.categoryId">
                                <option value="1">衣服</option>
                                <option value="2">鞋子</option>
                                <option value="3">项链</option>
                                <option value="4">包包</option>
                                <option value="5">娃娃</option>
                                <option value="6">汽车</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="coast-price">进货价:</label>
                            <input type="text" class="form-control" id="coast-price" placeholder="进货价" v-model="good.costPrice">
                        </div>
                        <div class="form-group">
                            <label for="price">单价:</label>
                            <input type="text" class="form-control" id="price" placeholder="单价" v-model="good.retailPrice">
                        </div>
                        <div class="form-group">
                            <label for="discount">折扣:</label>
                            <input type="text" class="form-control" id="discount" placeholder="折扣" v-model="good.discount">
                        </div>
                        <div class="form-group">
                            <label for="stock">库存:</label>
                            <input type="text" class="form-control" id="stock" placeholder="库存" v-model="good.stock">
                        </div>

                        <div class="form-group">
                            <label for="status">状态:</label>
                            <select class="form-control" id="status" v-model="good.status">
                                <option value="1">上架</option>
                                <option value="0">下架</option>

                            </select>
                        </div>
                        <div class="form-group">
                            <label for="list-time">上架时间:</label>
                            <input type="date" class="form-control" id="list-time" v-model="good.listTime">
                           <!-- <input type="file" name="file1" ref="f1" id="">-->
                        </div>
                        <div class="form-group">
                            <label for="inputEmail3" class="control-label">商品介绍:</label>
                            <textarea class="form-control" rows="3" cols="65" style="vertical-align: middle;" v-model="good.introduction"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="updateGoods(good)">提交</button>
                </div>
            </div>
        </div>
    </div>
    </div>


    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                goods:[],
                good:{},
                goodsName:''
            },
            methods:{
                updateStatus(num,id,i){
                    axios.get("/shop/goods/updateStatus?status="+num+"&goodsId="+id).then(resp=>{
                        if(resp.data){
                            alert("修改成功")
                            this.goods[i].status = num;
                        }
                    })
                },
                openEditGoodsModal(g){
                    this.good = g;

                    //    alert(id);
                    this.getEditGoodsModal().show();
                },
                updateGoods(good){
                    axios.post("/shop/goods/updateGood",Qs.stringify(this.good)).then(resp=>{
                        if(resp.data){
                            alert("修改成功")
                            location.reload()
                        }else{
                            alert("修改失败")
                        }
                    }).catch(e=>{
                        console.log(e)
                    })
                    this.getEditGoodsModal().hide();
                },
                getEditGoodsModal(){
                    let modal = bootstrap.Modal.getInstance(document.querySelector("#editGoodsModal"));
                    if(modal == null){
                        modal = new bootstrap.Modal("#editGoodsModal");
                    }
                    return modal;
                },
                toDetail(id){
                    location.href="/shop/views/brand/detailsBrand.html?goodsId="+id;
                },
                deleteGoods(id,i){
                  if(confirm("你确定要删除吗？")){
                   axios.get("/shop/goods/deleteGoods?goodsId="+id).then(resp=>{
                        if(resp.data){
                            alert("删除成功")
                            this.goods.splice(i,1)
                        }else{
                            alert("删除失败")
                        }
                    }).catch(e=>{
                        console.log(e)
                    })
                } },
                searchGoods(){
                    axios.get("/shop/goods/queryGoods?goodsName="+this.goodsName).then(resp=>{
                        this.goods = resp.data
                    }).catch(e=>{
                        console.log(e)
                    })
                }

            },
            created(){
               /* axios.get("/shop/isLogin").then(resp=> {
                    if(!resp.data){
                        location.href="/shop/views/login.html"
                    }
                }).catch(e=>{
                    console.log(e)
                })*/
               axios.get("/shop/goods/queryAllGoods").then(resp=>{
                    this.goods = resp.data
                }).catch(e=>{
                    alert("查询失败")
                })

            }
        })
    </script>
</body>


</html>